<style>
    div {
        border: 1px solid;
    }
    div .line {
        width: 2px;
        height: 2px;
        background-color: red;
        color: red;
        /* border-radius: 2px; */
    }
    #container{
        width: 800px;
        height:600px;
        position: relative;
    }
    
    #div1 {
        animation: aaa 4s;
    }
    #div2 {
        position: absolute;
        left: 500px;
     animation: bbb 4s;

    }
    /* #div3 {
        position: absolute;
        top: 500px;
        animation: ccc 4s;
    }
    #div4 {
        position: absolute;
        left: 0;
        animation: ddd 4s;
    } */
    @keyframes aaa
    {
        0% {
            width: 2px;
        }
        25%,100% {
            width: 500px;
        }
    }
    @keyframes bbb
    {
        0% {
        }
        25% {
            height: 2px;
        }
        50%,100% {
            height: 500px;
        }
    }
    
    @keyframes ccc
    {
        50% {
            width: 2px;
            left: 500px;
        }
        75%,100%{
            width: 500px;
            left: 0;
        }
    }
    
    @keyframes ddd
    {
        75% {
            height: 2px;
            top:498px;
        }
        100% {
            height: 500px;
            top:0px;
        }
    }
    </style>

    <div id="container">
        <!-- <div id="div1" class="line">
        </div> -->
        <div id="div2" class="line"></div>
        <!-- <div id="div3" class="line"></div>
        <div id="div4" class="line"></div> -->
    </div>